<template>

    <view class="save_img width_popup" >
        <uni-popup  :show="show" rel="pop"  type="center"  @change="change">
            <view class="popub_box">
                <view class="box">
                    <image style="width: 536upx;height: 860upx" v-if="sharePost" :src="sharePost"></image>
                </view>
                <view class="save_to font-medium" @click="save">保存图片至相册</view>
            </view>

        </uni-popup>
    </view>
</template>

<script>

  import {uniSwiperDot, uniPopup} from "@dcloudio/uni-ui"

  export default {
    components: {uniPopup},
    name: "recordPoster",
    props: {
      'show': {
        type: Boolean,
        defalut: true,
      },
      'sharePost': {
        type: String,
        defalut: '',
      },
    },
    watch:{
      show:function () {
        if(this.show){
          this.$refs.pop.open();
        }else{
          this.$refs.pop.close();
        }
      }
    },
    methods:{
      change: function (data) {
        if(data.show===false){
            this.$emit('cancel');
            console.log('cancel');
        }
      },
      save(){
        let _this= this;
        uni.showLoading();
      uni.getImageInfo({
        src: this.sharePost,
        success: function(image) {
          console.log('图片信息：', JSON.stringify(image));

          uni.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              uni.saveImageToPhotosAlbum({
                filePath: image.path,
                success: function() {
                  uni.hideLoading();
                  console.log('save success');
                  uni.showToast({
                    title: '图片保存成功',
                    icon: 'none',
                    duration: 2200
                  });
                  _this.show=0;
                  _this.$emit('cancel');

                },
                fail:function (e) {
                  uni.hideLoading();
                  console.log('图片信息：', e);
                }
              });
            },
            fail:function (e) {
              console.log('授权：', e);
              uni.hideLoading();
              uni.openSetting({
                success(res) {
                  console.log(res.authSetting)
                }
              });


              uni.showToast({
                'title':'权限不足'
              })
            }
          })





        },
        fail:function (e) {
          console.log('图片信息：', e);
        }

      });
      }
    }
  }
</script>

<style lang="scss">


    .save_img {
        .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
            width: 622upx;
            height: 1000upx;
            background-color: rgba(0, 0, 0, 0.0);
            position: relative;
        }
        .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
            padding: 0upx;
        }
        .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
        }
        .popub_box {

            .box {
                box-sizing: border-box;
                width: 100%;
                background-color: #fff;
                border: 2upx solid #707070;
                border-radius: 20upx;
                .title {
                    box-sizing: border-box;
                    width: 499upx;
                    height: 150upx;
                    margin-bottom: 40upx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .name_img {
                        width: 118upx;
                        height: 118upx;
                        border: 2upx solid $uni-color-fcb300;
                        border-radius: 50%;
                    }
                    .name {
                        width: 359upx;
                        height: 150upx;
                        box-sizing: border-box;
                        box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.1);
                        background-color: $uni-color-fffbf0;
                        padding: 15upx 53upx;
                        .name1 {
                            color: $uni-color-fcb300;
                            font-size: $uni-font-size-14;
                            line-height: 40upx;
                        }
                        .des {
                            color: $uni-color-664e37;
                            font-size: $uni-font-size-14;
                            line-height: 40upx;
                        }
                    }
                }
                .long_img {
                    width: 500upx;
                    height: 500upx;
                    border-radius: 10upx;
                    border: 2upx solid #eee;
                    overflow: hidden;
                    .img {
                        width: 500upx;
                        height: 500upx;
                    }
                }
                .qr_img {
                    width: 100%;
                    margin-top: 40upx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .qr {
                        width: 80upx;
                        height: 80upx;
                        border: 2upx solid #707070;
                        .img {
                            width: 80upx;
                            height: 80upx;
                        }
                    }
                    .des {
                        font-size: $uni-font-size-13;
                        color: $uni-color-664e37;
                        padding-left: 10upx;
                        line-height: 38upx;
                    }
                }
            }
            .save_to {
                width: 330upx;
                height: 100upx;
                background-color: $uni-color-fcb300;
                border-radius: 60upx;
                text-align: center;
                font-size: $uni-font-size-base;
                color: #fffbf0;
                line-height: 100upx;
                margin: 26upx auto 0;
            }
        }

    }
</style>
